<script lang="ts" setup>
import gridTitleList from './grid/gridTitle'
function getGridList() {
  const modules = import.meta.glob('./grid/*.vue', { eager: true })
  const entries = Object.entries(modules).map(([key, value]: any) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
    return [matched, value.default];
  })
  console.log('entries', entries)
  // Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
  const fromEntries = Object.fromEntries(entries)
  console.log('fromEntries', fromEntries)
  return fromEntries
}
const gridList = getGridList()

</script>
<template>
  <template v-for="(gridComp, name, i) in gridList" :key="name">
    <h1>{{i + 1}}. {{ gridTitleList[i] }}</h1>
    <component :is="gridComp" />
  </template>
  下边的grid-area可以了解下：
  <div class="v-md-plugin-tip tip">
    <p class="v-md-plugin-tip-title">&#10004; grid-area 属性</p>
    <p>
      &emsp;我们可以更进一步，给每个元素只定义一个属性 grid-area。
    </p>
    <p>&emsp;值的顺序如下:【上边逆时针方向：就是所谓的 上👆，左←，下👇，右☞】<br/>
      &emsp;grid-row-start<br/>
      &emsp;grid-column-start<br/>
      &emsp;grid-row-end<br/>
      &emsp;grid-column-end<br/>
    </p>
  </div>
  <div>
    再往后学习就有点得不偿失了。内容很丰富，但是意义不大。会导致很混乱，以上内容足够使用。如果想了解更多可以访问MDN学习grid相关内容。
  </div>
</template>
<style lang="scss">
.wrapper {
  margin-bottom: 15px;
  div {
    color: #fff;
    padding: 4px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  div:nth-child(1) {
    background: linear-gradient(55deg, #f7d336 25%, #52ce63);
  }
  div:nth-child(2) {
    background: linear-gradient(55deg,#42d392 15%,#647eff);
  }
  div:nth-child(3) {
    background: linear-gradient(55deg, #229cc5 15%, #bd34fe);
  }
  div:nth-child(4) {
    background: linear-gradient(55deg, #b464ff 15%, #d3427e);
  }
  div:nth-child(5) {
    background: linear-gradient(55deg, #d3427e 15%, #f7d336);
  }
}
</style>